<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分片下载 vs 整文件下载性能对比测试</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            color: #ffffff;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(25, 25, 35, 0.85);
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        h1 {
            font-size: 36px;
            font-weight: 700;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 15px;
        }

        .subtitle {
            color: #a0a0c0;
            font-size: 18px;
            margin-top: 10px;
        }

        .test-controls {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .control-card {
            background: rgba(40, 40, 60, 0.8);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
        }

        .control-title {
            font-size: 20px;
            color: #4facfe;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .control-title i {
            margin-right: 10px;
            font-size: 24px;
        }

        .file-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .file-option {
            background: rgba(30, 30, 45, 0.6);
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid rgba(79, 172, 254, 0.3);
        }

        .file-option:hover {
            border-color: #4facfe;
        }

        .file-option.selected {
            background: rgba(79, 172, 254, 0.25);
            border-color: #4facfe;
        }

        .network-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .network-option {
            background: rgba(30, 30, 45, 0.6);
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid rgba(79, 172, 254, 0.3);
        }

        .network-option:hover {
            border-color: #4facfe;
        }

        .network-option.selected {
            background: rgba(79, 172, 254, 0.25);
            border-color: #4facfe;
        }

        .network-option i {
            font-size: 24px;
            margin-bottom: 8px;
            display: block;
        }

        .test-area {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .test-card {
            background: rgba(40, 40, 60, 0.8);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

        .test-card-title {
            font-size: 22px;
            color: #4facfe;
            margin-bottom: 20px;
            text-align: center;
        }

        .progress-container {
            margin: 15px 0;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 16px;
            color: #a0a0c0;
        }

        .progress-bar {
            height: 15px;
            background: rgba(100, 100, 130, 0.4);
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            border-radius: 10px;
            width: 0%;
            transition: width 0.3s ease;
        }

        .chunked .progress-fill {
            background: linear-gradient(90deg, #4facfe, #00f2fe);
        }

        .whole .progress-fill {
            background: linear-gradient(90deg, #0ba360, #3cba92);
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .stat-box {
            background: rgba(30, 30, 45, 0.6);
            border-radius: 10px;
            padding: 15px;
            text-align: center;
        }

        .stat-value {
            font-size: 24px;
            font-weight: 700;
            margin: 10px 0;
            color: #4facfe;
        }

        .whole .stat-value {
            color: #0ba360;
        }

        .stat-label {
            font-size: 14px;
            color: #a0a0c0;
        }

        .chart-container {
            height: 150px;
            margin-top: 25px;
            background: rgba(30, 30, 45, 0.6);
            border-radius: 10px;
            padding: 15px;
        }

        canvas {
            width: 100%;
            height: 100%;
        }

        .results {
            background: rgba(40, 40, 60, 0.8);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
        }

        .results-title {
            font-size: 24px;
            color: #4facfe;
            margin-bottom: 20px;
            text-align: center;
        }

        .results-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .result-card {
            background: rgba(30, 30, 45, 0.6);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }

        .result-value {
            font-size: 28px;
            font-weight: 700;
            margin: 15px 0;
        }

        .result-label {
            font-size: 16px;
            color: #a0a0c0;
        }

        .btn-group {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        .btn {
            padding: 15px 40px;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            text-align: center;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
            color: white;
            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(79, 172, 254, 0.6);
        }

        .btn:disabled {
            background: #555;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .test-status {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
            font-size: 18px;
            color: #4facfe;
        }

        .test-status i {
            margin-right: 10px;
            font-size: 24px;
        }

        .difference {
            font-size: 20px;
            font-weight: 700;
            margin-top: 10px;
        }

        .positive {
            color: #0ba360;
        }

        .negative {
            color: #ff6b6b;
        }

        @media (max-width: 768px) {
            .test-area, .results-grid {
                grid-template-columns: 1fr;
            }
            
            .file-options, .network-options {
                grid-template-columns: 1fr;
            }
            
            .stats {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>分片下载 vs 整文件下载性能对比测试</h1>
            <p class="subtitle">实时比较两种下载方式的性能差异，优化您的文件传输体验</p>
        </header>

        <div class="test-controls">
            <div class="control-card">
                <h2 class="control-title"><i class="fas fa-file"></i> 选择测试文件</h2>
                <div class="file-options">
                    <div class="file-option selected" data-size="10">
                        <div>小文件</div>
                        <div class="file-size">10 MB</div>
                    </div>
                    <div class="file-option" data-size="50">
                        <div>中文件</div>
                        <div class="file-size">50 MB</div>
                    </div>
                    <div class="file-option" data-size="100">
                        <div>大文件</div>
                        <div class="file-size">100 MB</div>
                    </div>
                </div>
            </div>

            <div class="control-card">
                <h2 class="control-title"><i class="fas fa-wifi"></i> 模拟网络环境</h2>
                <div class="network-options">
                    <div class="network-option selected" data-speed="10">
                        <i class="fas fa-bolt"></i>
                        <div>高速网络</div>
                        <div>(10 MB/s)</div>
                    </div>
                    <div class="network-option" data-speed="2">
                        <i class="fas fa-tachometer-alt"></i>
                        <div>中速网络</div>
                        <div>(2 MB/s)</div>
                    </div>
                    <div class="network-option" data-speed="0.5">
                        <i class="fas fa-turtle"></i>
                        <div>低速网络</div>
                        <div>(0.5 MB/s)</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="test-area">
            <div class="test-card chunked">
                <h2 class="test-card-title"><i class="fas fa-puzzle-piece"></i> 分片下载</h2>
                <div class="progress-container">
                    <div class="progress-header">
                        <span>下载进度</span>
                        <span id="chunkedPercent">0%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="chunkedProgress"></div>
                    </div>
                </div>
                
                <div class="stats">
                    <div class="stat-box">
                        <div class="stat-label">下载速度</div>
                        <div class="stat-value" id="chunkedSpeed">0 MB/s</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">已用时间</div>
                        <div class="stat-value" id="chunkedTime">0.0s</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">分片数量</div>
                        <div class="stat-value" id="chunkedChunks">8</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">已传输数据</div>
                        <div class="stat-value" id="chunkedTransferred">0 MB</div>
                    </div>
                </div>
                
                <div class="chart-container">
                    <canvas id="chunkedChart"></canvas>
                </div>
                
                <div class="test-status">
                    <i class="fas fa-sync-alt fa-spin"></i>
                    <span>等待测试开始...</span>
                </div>
            </div>

            <div class="test-card whole">
                <h2 class="test-card-title"><i class="fas fa-file-download"></i> 整文件下载</h2>
                <div class="progress-container">
                    <div class="progress-header">
                        <span>下载进度</span>
                        <span id="wholePercent">0%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="wholeProgress"></div>
                    </div>
                </div>
                
                <div class="stats">
                    <div class="stat-box">
                        <div class="stat-label">下载速度</div>
                        <div class="stat-value" id="wholeSpeed">0 MB/s</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">已用时间</div>
                        <div class="stat-value" id="wholeTime">0.0s</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">连接状态</div>
                        <div class="stat-value" id="wholeStatus">稳定</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-label">已传输数据</div>
                        <div class="stat-value" id="wholeTransferred">0 MB</div>
                    </div>
                </div>
                
                <div class="chart-container">
                    <canvas id="wholeChart"></canvas>
                </div>
                
                <div class="test-status">
                    <i class="fas fa-sync-alt fa-spin"></i>
                    <span>等待测试开始...</span>
                </div>
            </div>
        </div>

        <div class="btn-group">
            <button id="startTest" class="btn">开始性能测试</button>
        </div>

        <div class="results">
            <h2 class="results-title">测试结果对比</h2>
            <div class="results-grid">
                <div class="result-card">
                    <div class="result-label">分片下载耗时</div>
                    <div class="result-value" id="chunkedResultTime">--</div>
                </div>
                <div class="result-card">
                    <div class="result-label">整文件下载耗时</div>
                    <div class="result-value" id="wholeResultTime">--</div>
                </div>
                <div class="result-card">
                    <div class="result-label">性能差异</div>
                    <div class="result-value" id="timeDifference">--</div>
                    <div id="differencePercentage" class="difference">--</div>
                </div>
                <div class="result-card">
                    <div class="result-label">分片平均速度</div>
                    <div class="result-value" id="chunkedAvgSpeed">--</div>
                </div>
                <div class="result-card">
                    <div class="result-label">整文件平均速度</div>
                    <div class="result-value" id="wholeAvgSpeed">--</div>
                </div>
                <div class="result-card">
                    <div class="result-label">速度差异</div>
                    <div class="result-value" id="speedDifference">--</div>
                    <div id="speedPercentage" class="difference">--</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // DOM元素
        const startTestBtn = document.getElementById('startTest');
        const fileOptions = document.querySelectorAll('.file-option');
        const networkOptions = document.querySelectorAll('.network-option');
        
        // 测试配置
        let testConfig = {
            fileSize: 10, // MB
            networkSpeed: 10, // MB/s
            chunkedChunks: 8
        };
        
        // 测试状态
        let testRunning = false;
        let testStartTime = 0;
        
        // 测试数据
        let testData = {
            chunked: {
                progress: 0,
                speedData: [],
                timeData: [],
                startTime: 0,
                transferred: 0
            },
            whole: {
                progress: 0,
                speedData: [],
                timeData: [],
                startTime: 0,
                transferred: 0
            }
        };
        
        // 初始化事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            // 文件大小选择
            fileOptions.forEach(option => {
                option.addEventListener('click', function() {
                    fileOptions.forEach(o => o.classList.remove('selected'));
                    this.classList.add('selected');
                    testConfig.fileSize = parseInt(this.dataset.size);
                    document.getElementById('chunkedChunks').textContent = Math.min(16, Math.max(4, Math.floor(testConfig.fileSize / 5)));
                });
            });
            
            // 网络环境选择
            networkOptions.forEach(option => {
                option.addEventListener('click', function() {
                    networkOptions.forEach(o => o.classList.remove('selected'));
                    this.classList.add('selected');
                    testConfig.networkSpeed = parseFloat(this.dataset.speed);
                });
            });
            
            // 开始测试按钮
            startTestBtn.addEventListener('click', startTest);
            
            // 初始化图表
            initCharts();
        });
        
        // 初始化图表
        function initCharts() {
            const chunkedCtx = document.getElementById('chunkedChart').getContext('2d');
            const wholeCtx = document.getElementById('wholeChart').getContext('2d');
            
            // 初始绘制空图表
            drawChart(chunkedCtx, []);
            drawChart(wholeCtx, []);
        }
        
        // 绘制图表
        function drawChart(ctx, data) {
            const width = ctx.canvas.width;
            const height = ctx.canvas.height;
            
            // 清除画布
            ctx.clearRect(0, 0, width, height);
            
            // 绘制背景网格
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
            ctx.lineWidth = 1;
            
            // 水平网格线
            for (let y = 0.25; y <= 1; y += 0.25) {
                const yPos = height * (1 - y);
                ctx.beginPath();
                ctx.moveTo(0, yPos);
                ctx.lineTo(width, yPos);
                ctx.stroke();
            }
            
            if (data.length === 0) return;
            
            // 绘制数据线
            const maxValue = Math.max(...data, testConfig.networkSpeed);
            const scaleY = height / maxValue;
            
            ctx.beginPath();
            ctx.moveTo(0, height);
            
            for (let i = 0; i < data.length; i++) {
                const x = (i / (data.length - 1)) * width;
                const y = height - (data[i] * scaleY);
                
                if (i === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            }
            
            ctx.strokeStyle = ctx === document.getElementById('chunkedChart').getContext('2d') ? 
                '#4facfe' : '#0ba360';
            ctx.lineWidth = 3;
            ctx.stroke();
        }
        
        // 开始测试
        function startTest() {
            if (testRunning) return;
            
            // 重置测试状态
            testRunning = true;
            testStartTime = Date.now();
            testData = {
                chunked: {
                    progress: 0,
                    speedData: [],
                    timeData: [],
                    startTime: Date.now(),
                    transferred: 0
                },
                whole: {
                    progress: 0,
                    speedData: [],
                    timeData: [],
                    startTime: Date.now(),
                    transferred: 0
                }
            };
            
            startTestBtn.disabled = true;
            startTestBtn.textContent = "测试进行中...";
            
            // 更新UI
            document.querySelectorAll('.test-status').forEach(el => {
                el.innerHTML = '<i class="fas fa-sync-alt fa-spin"></i><span>测试进行中...</span>';
            });
            
            // 开始模拟下载
            simulateChunkedDownload();
            simulateWholeDownload();
        }
        
        // 模拟分片下载
        function simulateChunkedDownload() {
            if (!testRunning) return;
            
            const chunkSize = testConfig.fileSize / testConfig.chunkedChunks;
            const timePerChunk = (chunkSize / testConfig.networkSpeed) * 1000;
            
            let currentChunk = 0;
            let lastUpdate = Date.now();
            
            function downloadNextChunk() {
                if (currentChunk >= testConfig.chunkedChunks || !testRunning) {
                    if (currentChunk >= testConfig.chunkedChunks) {
                        updateChunkedUI(100, testConfig.fileSize);
                        testData.chunked.speedData.push(testConfig.networkSpeed);
                        drawChart(document.getElementById('chunkedChart').getContext('2d'), testData.chunked.speedData);
                        
                        // 检查是否两个测试都完成了
                        if (testData.whole.progress >= 100) {
                            finishTest();
                        }
                    }
                    return;
                }
                
                const now = Date.now();
                const elapsed = now - lastUpdate;
                lastUpdate = now;
                
                // 模拟下载进度
                const progressPerChunk = 100 / testConfig.chunkedChunks;
                const transferredPerChunk = testConfig.fileSize / testConfig.chunkedChunks;
                
                // 更新进度
                testData.chunked.progress += progressPerChunk;
                testData.chunked.transferred += transferredPerChunk;
                
                // 记录速度数据
                testData.chunked.speedData.push(testConfig.networkSpeed);
                
                // 更新UI
                updateChunkedUI(testData.chunked.progress, testData.chunked.transferred);
                
                // 绘制图表
                drawChart(document.getElementById('chunkedChart').getContext('2d'), testData.chunked.speedData);
                
                currentChunk++;
                
                // 随机延迟模拟网络波动
                const delay = timePerChunk + (Math.random() - 0.5) * timePerChunk * 0.2;
                
                setTimeout(downloadNextChunk, delay);
            }
            
            downloadNextChunk();
        }
        
        // 模拟整文件下载
        function simulateWholeDownload() {
            if (!testRunning) return;
            
            const totalTime = (testConfig.fileSize / testConfig.networkSpeed) * 1000;
            const startTime = Date.now();
            let lastUpdate = startTime;
            
            function updateDownload() {
                if (!testRunning) return;
                
                const now = Date.now();
                const elapsed = now - startTime;
                
                if (elapsed >= totalTime) {
                    testData.whole.progress = 100;
                    testData.whole.transferred = testConfig.fileSize;
                    updateWholeUI(100, testConfig.fileSize);
                    
                    // 记录速度数据
                    testData.whole.speedData.push(testConfig.networkSpeed);
                    drawChart(document.getElementById('wholeChart').getContext('2d'), testData.whole.speedData);
                    
                    // 检查是否两个测试都完成了
                    if (testData.chunked.progress >= 100) {
                        finishTest();
                    }
                    return;
                }
                
                // 计算进度
                const progress = (elapsed / totalTime) * 100;
                const transferred = (elapsed / totalTime) * testConfig.fileSize;
                
                // 更新进度
                testData.whole.progress = progress;
                testData.whole.transferred = transferred;
                
                // 模拟速度波动
                const speed = testConfig.networkSpeed * (0.9 + Math.random() * 0.2);
                
                // 记录速度数据
                testData.whole.speedData.push(speed);
                
                // 更新UI
                updateWholeUI(progress, transferred);
                
                // 绘制图表
                drawChart(document.getElementById('wholeChart').getContext('2d'), testData.whole.speedData);
                
                // 继续更新
                requestAnimationFrame(updateDownload);
            }
            
            updateDownload();
        }
        
        // 更新分片下载UI
        function updateChunkedUI(progress, transferred) {
            const elapsed = (Date.now() - testData.chunked.startTime) / 1000;
            
            document.getElementById('chunkedProgress').style.width = `${progress}%`;
            document.getElementById('chunkedPercent').textContent = `${Math.min(100, Math.round(progress))}%`;
            document.getElementById('chunkedSpeed').textContent = `${testConfig.networkSpeed.toFixed(1)} MB/s`;
            document.getElementById('chunkedTime').textContent = `${elapsed.toFixed(1)}s`;
            document.getElementById('chunkedTransferred').textContent = `${transferred.toFixed(1)} MB`;
        }
        
        // 更新整文件下载UI
        function updateWholeUI(progress, transferred) {
            const elapsed = (Date.now() - testData.whole.startTime) / 1000;
            
            document.getElementById('wholeProgress').style.width = `${progress}%`;
            document.getElementById('wholePercent').textContent = `${Math.min(100, Math.round(progress))}%`;
            
            // 计算当前速度
            const currentSpeed = testData.whole.speedData.length > 0 ? 
                testData.whole.speedData[testData.whole.speedData.length - 1] : 0;
            
            document.getElementById('wholeSpeed').textContent = `${currentSpeed.toFixed(1)} MB/s`;
            document.getElementById('wholeTime').textContent = `${elapsed.toFixed(1)}s`;
            document.getElementById('wholeTransferred').textContent = `${transferred.toFixed(1)} MB`;
            
            // 更新连接状态
            const statuses = ['稳定', '良好', '波动', '较差'];
            const statusIndex = Math.min(3, Math.floor(Math.random() * 4));
            document.getElementById('wholeStatus').textContent = statuses[statusIndex];
        }
        
        // 完成测试
        function finishTest() {
            testRunning = false;
            
            // 更新测试状态
            document.querySelectorAll('.test-status').forEach(el => {
                el.innerHTML = '<i class="fas fa-check-circle"></i><span>测试完成</span>';
            });
            
            startTestBtn.disabled = false;
            startTestBtn.textContent = "重新开始测试";
            
            // 计算测试结果
            const chunkedTime = (Date.now() - testData.chunked.startTime) / 1000;
            const wholeTime = (Date.now() - testData.whole.startTime) / 1000;
            
            const chunkedAvgSpeed = testConfig.fileSize / chunkedTime;
            const wholeAvgSpeed = testConfig.fileSize / wholeTime;
            
            const timeDifference = wholeTime - chunkedTime;
            const timeDifferencePercent = (Math.abs(timeDifference) / Math.min(chunkedTime, wholeTime)) * 100;
            
            const speedDifference = chunkedAvgSpeed - wholeAvgSpeed;
            const speedDifferencePercent = (Math.abs(speedDifference) / Math.min(chunkedAvgSpeed, wholeAvgSpeed)) * 100;
            
            // 更新结果区域
            document.getElementById('chunkedResultTime').textContent = `${chunkedTime.toFixed(2)}s`;
            document.getElementById('wholeResultTime').textContent = `${wholeTime.toFixed(2)}s`;
            document.getElementById('timeDifference').textContent = `${Math.abs(timeDifference).toFixed(2)}s ${timeDifference > 0 ? '更快' : '更慢'}`;
            
            document.getElementById('chunkedAvgSpeed').textContent = `${chunkedAvgSpeed.toFixed(2)} MB/s`;
            document.getElementById('wholeAvgSpeed').textContent = `${wholeAvgSpeed.toFixed(2)} MB/s`;
            document.getElementById('speedDifference').textContent = `${Math.abs(speedDifference).toFixed(2)} MB/s ${speedDifference > 0 ? '更快' : '更慢'}`;
            
            // 更新百分比差异
            const timeDiffElem = document.getElementById('differencePercentage');
            timeDiffElem.textContent = `${timeDifferencePercent.toFixed(1)}% ${timeDifference > 0 ? '更快' : '更慢'}`;
            timeDiffElem.className = timeDifference > 0 ? 'difference positive' : 'difference negative';
            
            const speedDiffElem = document.getElementById('speedPercentage');
            speedDiffElem.textContent = `${speedDifferencePercent.toFixed(1)}% ${speedDifference > 0 ? '更快' : '更慢'}`;
            speedDiffElem.className = speedDifference > 0 ? 'difference positive' : 'difference negative';
        }
    </script>
</body>
</html>